<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Gemp-LotR</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Expires" content="-1">

    <style type="text/css">
        body {
            font-size: 12px;
            color: #ffffff;
        }

        .panel {
            overflow: hidden !important;
        }

        .card {
            position: absolute;
            overflow: hidden;
        }

        .card .img {
            position: absolute;
        }

        .card .click {
            position: absolute;
        }

        .card .border {
            position: absolute;
            border: solid #000000;
        }

        .card .count {
            position: absolute;
            font-weight: bolder;
            display: table-cell;
            text-align: right;
            vertical-align: top;
        }

        .deckPart {
            position: relative;
        }

    </style>
    <link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
    <link rel="stylesheet" type="text/css" href="js/jquery/styles/jquery.spinnercontrol.css">

    <script type="text/javascript" src="js/jquery/jquery-1.6.2.js"></script>
    <script type="text/javascript" src="js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.layout.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.touchSwipe.js"></script>

    <script type="text/javascript" src="js/gemp-019/inheritance.js"></script>
    <script type="text/javascript" src="js/gemp-019/common.js"></script>

    <script type="text/javascript" src="/generic-tcg/js/CardContainer.js"></script>
    <script type="text/javascript" src="/generic-tcg/js/CardGroup.js"></script>
    <script type="text/javascript" src="/generic-tcg/js/RowCardLayoutCardGroup.js"></script>
    <script type="text/javascript" src="/generic-tcg/js/AttachedCardsLayoutCardGroup.js"></script>
    <script type="text/javascript" src="/generic-tcg/js/jquery/jquery-sizes.js"></script>

    <script type="text/javascript" src="js/gemp-019/communication.js"></script>
    <script type="text/javascript" src="js/gemp-019/logging.js"></script>
    <script type="text/javascript" src="js/gemp-019/commonUi.js"></script>
    <script type="text/javascript" src="js/gemp-019/set20.js"></script>
    <script type="text/javascript" src="js/gemp-019/jCards.js"></script>
    <script type="text/javascript" src="js/gemp-019/cardFilter2.js"></script>
    <script type="text/javascript" src="js/gemp-019/DeckPanel.js"></script>
    <script type="text/javascript" src="js/gemp-019/CardInformationDialog.js"></script>
    <script type="text/javascript" src="js/gemp-019/deckBuildingUi2.js"></script>

    <script type="text/javascript">

        $(document).ready(
                function () {
                    var ui = new GempLotrDeckBuildingUI2(
                            $("#collectionFilterDiv"),
                            $("#paging"),
                            $("#collectionContents"),
                            $("#deckDiv")
                            );

                    var doLayout = function() {
                        log("deckBuild2.html::doLayout");
                        var collectionWidth = $("#collectionDiv").width();
                        var collectionHeight = $("#collectionDiv").height();
                        var deckWidth = $("#deckPanel").width();
                        var deckHeight = $("#deckPanel").height();
                        ui.layoutUI(collectionWidth, collectionHeight, deckWidth, deckHeight);
                    };

                    $('body').layout({
                        applyDefaultStyles:true,
                        onresize:function () {
                            doLayout();
                        },
                        north__minSize: 230
                    });

                    $("#northPanel").layout({
                        applyDefaultStyles:true,
                        onresize:function() {
                            doLayout();
                        },
                        west__minSize: 305

                    });

                    $(".ui-layout-pane").css({"background-color":"#000000"});

                    $(window).resize(function () {
                        doLayout();
                    });

                    doLayout();
                });

    </script>

</head>
<body>
<div id='northPanel' class="ui-layout-north panel" style="padding: 0;">
    <div id="collectionFilterDiv" class="ui-layout-west panel"></div>
    <div id="collectionDiv" class="ui-layout-center panel">
        <div id="paging"></div>
        <div id="collectionContents" class="ui-widget-content" style="position: relative"></div>
    </div>
</div>
<div id="deckPanel" class="ui-layout-center panel">
    <div id="deckDiv" class="ui-widget-content">
    </div>
</div>
</body>
</html>
